/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="container">
    <TabBarContainerVue>
      <TabBarContentVue>
        <div class="main-content" :style="{ paddingTop: `${topAvoidArea}px` }">
          <CustomTab></CustomTab>

          <swiper :options="swiperOptions" :slidesPerView="slidesPerViewCount" ref="mySwiper">
            <swiper-slide v-for="(image, index) in images" :key="index">
              <img :src="image.uri" class="carousel-image" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination">
            </div>
          </swiper>

          <div class="entrances-centent">
            <swiper :options="swiperOptionsLong" :slidesPerView="'auto'" :resistanceRatio="0" ref="mySwiper3">
              <swiper-slide v-for="(image, index) in entrances" :key="index" class="swiper-slide">
                <div class="entrances" :style="{ paddingRight: entrancesPadding }">
                  <img :src="image.uri" class="entrances-image" />
                  <div class="entrances-text">{{ image.name }}</div>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <MultiGridVue :columnsTemplate="columnsTemplate" gridColumnGap='20px' gridRowGap='12px' style="height: auto;">
            <div v-for="(item) in girdData" :key="item.id">
              <div class="item-container">
                <img src="../../assets/videoList/images/image1.png" style="width: 100%;" />
                <div class="text-overlay">
                  <div class="top-left">正片</div>
                  <div class="bottom-right">9.0</div>
                </div>
              </div>
              <div class="item-content">
                <div class="common-text item-title">{{ '这是超人的水准' }}</div>
                <div class="common-text item-subtitle">{{ '中秋节端午节重阳节泼水节节日快乐节日快乐' }}</div>
              </div>
            </div>
          </MultiGridVue>
        </div>
      </TabBarContentVue>
      <TabBarVue :bgColor="'#F1F3F5'" :height="barHeight" :width="barWidth">
        <TabBarItemVue v-for="(title, index) in tabBarData" :key="index">
          <div class="tab-button" :style="{ marginBottom: `${bottomAvoidArea}px` }">
            <img class="bottom-img" :src="title.uri" />
            <span :class="index === 0 ? 'bottom-title-active' : 'bottom-title'"> {{ title.name }}</span>
          </div>
        </TabBarItemVue>
      </TabBarVue>
    </TabBarContainerVue>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import { TabBarContainerVue, TabBarContentVue, TabBarVue, TabBarItemVue } from '@hadss/web_adaptive_layout_vue3';
import { girdData, images, entrances, tabBarData } from './mockData';
import CustomTab from './CustomTab.vue';
import { MultiGridVue } from '@hadss/web_adaptive_layout_vue3';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
import { AvoidArea, AvoidAreaInfo, AvoidAreaType } from '../../common/windowCommon';

const breakpointManager = new BreakpointManager();
const columnsTemplate = {
  'sm': '1fr 1fr',
  'md': '1fr 1fr 1fr',
  'lg': '1fr 1fr 1fr 1fr'
};
const barHeight = reactive({
  "sm": '56px',
  "md": '48px',
  "lg": '100%'
});
const barWidth = {
  "md": '100%',
  "lg": '96px'
};
const showSwiper = ref(true);
const slidesPerViewCount = ref(1);
const swiperOptions = {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    type: 'bullets'
  },
  loop: true,
  autoplay: false,
  slidesPerView: 1,
  spaceBetween: 30,
  effect: 'slide',
  speed: 500,
  resistance: true,
  resistanceRatio: 0.85,
};
const swiperOptionsLong = {
  direction: 'horizontal',
  autoplay: false,
  loop: false,
  freeMode: true,
  grabCursor: true,
  mousewheel: {
    forceToAxis: true
  },
  resistanceRatio: 0,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true
  }
};
const entrancesPadding = ref('38px');
const topAvoidArea = ref(0);
const bottomAvoidArea = ref(0);

const unsubscribe = breakpointManager.subscribeToBreakpoint(() => {
  showSwiper.value = breakpointManager.useBreakpointValue({
    'sm': true,
    'md': false,
    'lg': false
  });
  slidesPerViewCount.value = breakpointManager.useBreakpointValue({
    'sm': 1,
    'md': 2,
    'lg': 2,
    'xl': 3
  });
  entrancesPadding.value = breakpointManager.useBreakpointValue({
    'sm': '38px',
    'md': '65px',
    'lg': '100px',
  });
});

const handleAvoidAreaChange = (event: any) => {
  const data = event.detail as AvoidAreaInfo;
  const areaType = data.type;
  if (areaType === AvoidAreaType.TYPE_SYSTEM) {
    topAvoidArea.value = (window as any).webClass?.pxToVp(data.area.topRect.height);
  }
  if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
    bottomAvoidArea.value = (window as any).webClass?.pxToVp(data.area.bottomRect.height);
    Object.assign(barHeight, {
      "sm": `${56 + bottomAvoidArea.value}px`,
      "md": `${48 + bottomAvoidArea.value}px`,
      "lg": '100%'
    });
  }
};

onMounted(() => {
  if ((window as any).webClass) {
    const webClass = (window as any).webClass;
    const topArea = webClass.getAvoidArea(AvoidAreaType.TYPE_SYSTEM) as AvoidArea;
    const bottomArea = webClass.getAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR) as AvoidArea;
    topAvoidArea.value = webClass.pxToVp(topArea.topRect.height);
    bottomAvoidArea.value = webClass.pxToVp(bottomArea.bottomRect.height);
    Object.assign(barHeight, {
      "sm": `${56 + bottomAvoidArea.value}px`,
      "md": `${48 + bottomAvoidArea.value}px`,
      "lg": '100%'
    });
  }
  window.addEventListener("avoidAreaChange", handleAvoidAreaChange);
});

onBeforeUnmount(() => {
  if (unsubscribe) {
    unsubscribe();
  }
  window.removeEventListener("avoidAreaChange", handleAvoidAreaChange);
});
</script>

<style lang="less" scoped>
@import './VideoHome.less';
</style>